<template>
  <div class="date">
    <van-nav-bar
      title="萌宠日历"
      left-text="返回"
      right-text="日期"
      left-arrow
      class="header"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-image
      width="20rem"
      height="20rem"
      fit="none"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      class="img"
    />
    <div class="riqi">
      <div id="hao">
        {{ hao }}
      </div>
      <div class="xy">
        <span id="yf">{{ yf+1 }}月</span><br><span id="xq">星期{{ xq }}</span>
      </div>
    </div>
    <van-text-ellipsis
      rows="3"
      :content="text"
      expand-text="展开"
      collapse-text="收起"
      class="wenben"
    />
  </div>
</template>

<script setup lang="ts">
import { showFailToast } from 'vant'

const onClickLeft = () => window.history.back()
const onClickRight = () => showFailToast('不急這裏還沒做')
const date = new Date()
const hao = date.getDate()
const yf = date.getMonth()
const xq = date.getDay()
console.log(hao, '---', yf, '---', xq)
const text = 'Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。'
</script>

  <style scoped>
.date {
  height: 680px;
  height: 620px;
  background: #cccccc;
  background: #f7f7f7;
}
.img {
  margin: 20px 30px;
}
.riqi {
  margin: 0 auto;
  width: 150px;
  height: 50px;
}
#hao {
  float: left;
  width: 75px;
  height: 50px;
  font-size: 40px;
  text-align: center;
  line-height: 50px;
}
.xy {
  float: left;
  width: 50px;
  height: 50px;
}
.wenben {
  padding: 0 20px;
}
  </style>
